<template>
  <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();

// 使用 computed 来获取路由参数，这样可以确保响应性
const id = computed(() => route.params.id);
const title = computed(() => route.params.title);
const content = computed(() => route.params.content);
</script>

<style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list>li {
  line-height: 30px;
}
</style>